<template>
  <div id="app">
    <h2>记事本</h2>
    <div class="main">
      <input type="text" v-model.trim="brand" @keyup.enter="add"/>
      <ul  v-for="(item,index) in list" :key="item.id">
        <li>
          <div class="content"><span>{{index + 1}}.</span> {{item.state}}</div>
          <button @click="remove(item.id)">❌</button>
        </li>
      </ul>
      <p class="empty" v-if="this.list.length === 0">空空如也...</p>
      <p class="empty" v-else></p>
    </div>
    <div class="bottom">
      <span>合计:{{amount}}</span>
      <span @click="clear">清空</span>
    </div>
  </div>
</template>

<script>
import {nanoid} from "nanoid"

export default {
  data(){
    return{
      // 输入框内容
      brand: '',
      // 列表内容
      list:[
        // {id:"",state:''}
      ],
    }
  },
  // 计算属性
  computed:{
    amount(){
      return this.list.length
    }
  },
  mounted() {
      // 判断初始存储是否为空
     if(JSON.parse(window.localStorage.getItem("MsgList")).length!==0){
       this.list = JSON.parse(window.localStorage.getItem("MsgList"));
     }
   },
  methods:{
    //将数据添加到本地存储
    setWindow(){
      window.localStorage.setItem("MsgList",JSON.stringify(this.list))
    },
    // 添加信息
    add() {
      // 判断输入是否为空
      if(this.brand === '') return alert('请输入内容!')
      // 输入不为空,添加对象
      // 获取对象
      const obj = {
        id: nanoid(),
        state: this.brand,
      }
      // 添加对象放入表单(push()方法)
      this.list.push(obj)
      this.setWindow(obj)
      // 清空输入框
      this.brand=''
    },
    // 删除信息
    remove(id) {
      // 过滤出 id 对应的信息,并进行删除（es6 filter() 数组过滤方法）
     this.list.forEach((item,index)=>{
       if(item.id === id){
         this.list.splice(index,1);
       }
     })

    },
    // 清除所有信息
    clear(){
      this.list = undefined;
      // 重新创建一个数组
      this.list = new Array();
      window.localStorage.clear();
    },
    //
    // getIndex(index){
    //   console.log(index);
    // }
  },
}
</script>

<style scoped>
#app {
  text-align: center;
  background: #fbebd4;
  width: 480px;
  max-height: 400px;
  box-sizing: border-box;
  padding-top: 50px;
  border-radius: 5px;
  position: relative;
}
#app h2 {
  margin: 0;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #6a4d52;
  font-size: 30px;
}
#app .main {
  max-height: 300px;
  width: 454px;
  margin: 5px auto 0;
  transform: translateX(1px);
}
#app ul {
  padding: 0;
  max-height: 200px;
  overflow-y: scroll;
  margin-bottom: 0;
}
#app ul::-webkit-scrollbar {
  width: 0 !important;
}
#app li {
  list-style: none;
  border-bottom: 1px solid #6a4d52;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 25px;
  color: #8895a8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 40px;
}
#app li:hover {
  background-color: #fcfaed;
}
#app li span {
  color: #6a4d52;
}
#app button {
  cursor: pointer;
  border: none;
  background-color: transparent;
}
#app input {
  height: 30px;
  font-size: 20px;
  appearance: none;
  outline: none;
  border: none;
  padding-left: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #6a4d52;
}

#app .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 14px;
}
#app .bottom span {
  color: #929093;
}
#app .bottom span:last-child {
  cursor: pointer;
  color: #935256;
}
#app p {
  color: #929093;
  font-size: 20px;
  margin: 0;
  padding: 0;
}
</style>